<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8" session="false" deferredSyntaxAllowedAsLiteral="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="apple-touch-icon" sizes="76x76" href="${pageContext.request.contextPath}/page/assets/img/apple-icon.png" />
	<link rel="icon" type="${pageContext.request.contextPath}/page/image/png" href="${pageContext.request.contextPath}/src/main/webapp/page/assets/img/favicon.png" />
	<title>考试预约</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

	<!-- CSS Files -->
    <link href="${pageContext.request.contextPath}/page/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/page/admin/lib/My97DatePicker/4.8/skin/WdatePicker.css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/page/assets/css/paper-bootstrap-wizard.css" rel="stylesheet" />

	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link href="${pageContext.request.contextPath}/webapp/page/assets/css/demo.css" rel="stylesheet" />

	<!-- Fonts and Icons -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
	<link href="${pageContext.request.contextPath}/page/assets/css/themify-icons.css" rel="stylesheet">
	<script src="${pageContext.request.contextPath}/page/admin/lib/jquery/1.9.1/jquery.min.js"></script> 
	<script src="${pageContext.request.contextPath}/static/lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/page/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<!-- 日期链接 -->
	
</head>

<body>
<div class="image-container set-full-height" style="background-image: url('${pageContext.request.contextPath}/page/assets/img/g3.jpg')">
	    <!--   Creative Tim Branding   -->
	    <a href="#">
	         <div class="logo-container">
	            <div class="logo">
	                <img src="${pageContext.request.contextPath}/page/assets/img/new_logo.png">
	            </div>
	            <div class="brand">
	                 用户
	            </div>
	        </div>
	    </a>

		<!--  Made With Paper Kit  -->
		

	    <!--   Big container   -->
	    <div class="container">
	        <div class="row">
		        <div class="col-sm-8 col-sm-offset-2">

		            <!--      Wizard container        -->
		            <div class="wizard-container">

		                <div class="card wizard-card" data-color="orange" id="wizardProfile">
		                    <form action="" method="">
		                <!--        You can switch " data-color="orange" "  with one of the next bright colors: "blue", "green", "orange", "red", "azure"          -->

		                    	<div class="wizard-header text-center">
		                        	<h3 class="wizard-title">考试预约</h3>
									<p class="category"></p>
		                    	</div>

								<div class="wizard-navigation">
									<div class="progress-with-circle">
									     <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="3" style="width: 21%;"></div>
									</div>
									<ul>
			                            <li>
											<a href="#about" data-toggle="tab">
												<div class="icon-circle">
													<i class="ti-user"></i>
												</div>
											         科目信息
											</a>
										</li>
			                            <li>
											<a href="#account" data-toggle="tab">
												<div class="icon-circle">
													<i class="ti-settings"></i>
												</div>
												   考试场地
											</a>
										</li>
			                            <li>
											<a href="#address" data-toggle="tab">
												<div class="icon-circle">
													<i class="ti-map"></i>
												</div>
												时间选择
											</a>
										</li>
			                        </ul>
								</div>
		                        <div class="tab-content">
		                            <div class="tab-pane" id="about">
		                            	<div class="row">
											<h5 class="info-text"> 个人信息</h5>
											<div class="col-sm-4 col-sm-offset-1">
												<div class="picture-container">
													<div class="picture">
														<img src="${pageContext.request.contextPath}/page/assets/img/default-avatar.jpg" class="picture-src" id="wizardPicturePreview" title="" />
														<input type="file" id="wizard-picture">
													</div>
													<h6>照片</h6>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group" >
													<label >居民身份证：
														<textarea rows="1" cols="30"   style="resize:none;" readonly="readonly">${user.idNumber}</textarea>
													</label>
												  
												</div>
												<div class="form-group">
													<label>&nbsp;&nbsp;&nbsp;姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：</label>
													
													<textarea rows="1" cols="30"   style="resize:none;" readonly="readonly">${user.userName}</textarea>
												</div>
												<div class="form-group">
													<label>手机号码;&nbsp;&nbsp;&nbsp;：</label>
												
													<textarea rows="1" cols="30"   style="resize:none;" readonly="readonly">${user.tel}</textarea>
												</div>
												<div class="form-group">
													<label>申请车型;&nbsp;&nbsp;&nbsp;：</label>
													<textarea rows="1" cols="30"   style="resize:none;" readonly="readonly">${typeName}</textarea>													 
												</div>	
											</div>
											<div class="col-sm-10 col-sm-offset-1">
												<div class="row"  align="center" >
													<h5 >考试科目</h5>
													 <select id="subject" name="subject" class="form-control">
		                                                  <option value="0">请选择科目</option>
														  <option id="course1" value="1">科目一理论考试</option>
														  <option id="course2" value="2">科目二</option>
														  <option id="course3" value="3">科目三道路安全驾驶考试</option>
														  <option id="course4" value="4">科目三安全文明驾驶考试</option>
		                                            </select>
													
													
												</div>
											</div>
										</div>
		                            </div>
		                            <div class="tab-pane" id="account" align="center">
		                                <h5 class="info-text">考试区域&nbsp;: ${user.area}	</h5>
		                                <h5 >地点</h5>
													 <select id="address1">
		                                                  
		                                            </select>
		                            </div>
		                            <div class="tab-pane" id="address">
		                                <div class="row">
		                                    <div class="row" align="center">
           &nbsp;&nbsp;&nbsp;&nbsp;日期范围：
			<input type="text" onfocus="WdatePicker({minDate:'%y-%M-#{%d+3}' ,maxDate:'#F{$dp.$D(\'logmax\')||\'2050-12-31\'}'})" id="logmin" class="input-text Wdate" style="width:120px;" autocomplete="off">
			至
			<input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'2050-12-31'})" id="logmax" class="input-text Wdate" style="width:120px;" autocomplete="off">
			<button  onclick="search(1,10)"  class="btn btn-success" type="button"><i class="Hui-iconfont"></i>查询</button>
									
		                                   
		                                  
		                              	  </div>
		                                     <table class="table table-border table-bordered table-hover table-bg table-sort">
													<thead>
														<tr class="text-c">
																	<th width="30">日期</th>
																	<th width="20">时间段</th>
																	<th width="40">考试类型</th>
																	<th width="30">科目</th>
																	<th width="40">可预约人数</th>
																	<th width="10">状态</th>
													            	<th width="10"><input type="checkbox" name="" value=""></th>
														</tr>
													</thead>
													<tbody id="tbody"></tbody>

										  </table>
		                                   
		                                    
		                                </div>
		                            </div>
		                        </div>
		                        <div class="wizard-footer">
		                           <div class="pull-right">
		                                <input type='button' class='btn btn-next btn-fill btn-warning btn-wd' id="next" name='next' value='下一项' />
		                                <input type='button' class='btn btn-finish btn-fill btn-warning btn-wd' id="finish"name='finish' value='完成' />
		                            </div>

		                            <div class="pull-left">
		                                <input type='button' class='btn btn-previous btn-default btn-wd' name='previous' value='返回' />
		                            </div>
		                            <div class="clearfix"></div>
		                        </div>
		                    </form>
		                </div>
		            </div> <!-- wizard container -->
		        </div>
	    	</div><!-- end row -->
		</div> <!--  big container -->

	    <div class="footer">
	        <div class="container text-center">
	        
	        </div>
	    </div>
	</div>

	
</body>

	<!--   Core JS Files   -->
	<script src="${pageContext.request.contextPath}/page/assets/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/page/assets/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>

	<!--  Plugin for the Wizard -->
	<script src="${pageContext.request.contextPath}/page/assets/js/paper-bootstrap-wizard.js" type="text/javascript"></script>

	<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
	<script src="${pageContext.request.contextPath}/page/assets/js/jquery.validate.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function()
	{
		nextClick();
		order();
		$("#next").hide();
		status();//第一页面
		totalSession();//第二页面
	
	   //  test();
	    // select();
	});
	function search(page,pageSize){
		var typeName;
		var subject;
		var startTime = $("#logmin").val();
		var endTime = $("#logmax").val();
		
		time(page,pageSize,startTime,endTime); //搜索显示预约
	
	}
	function time(page,pageSize,startTime,endTime,typeName,subject){//预约场次选择列表
		
			$.ajax({
				url:"/driving/Subject/time",
				type:"get",
				data:{"state":1,"page":page,"pageSize":pageSize,"startTime":startTime,"endTime":endTime},
				dataType:"json",
				async:false,
				success:function(data)
				{
					$("#tbody").html("");
					$.each(data.list,function(index,session){
						$("#tbody").append(
								'<tr class="text-c">'+
								'<td>'+session.dates+'</td>'+
								'<td>'+session.times+'</td>'+
								'<td>'+session.type.typeName+'</td>'+
								'<td>'+session.subject+'</td>'+
								'<td>'+session.remain+'</td>'+
								'<td>'+session.state+'</td>'+
								'<td><input class="checkbox" type="checkbox" name=""></td>'+
							'</tr>'
								
						);
					});
				},
				error:function(){
					alert('error');
				}		
					
		})
		
	
	}
	function nextClick(){ //下一项按钮点击事件
		$("#next").click(function(){
			$("#next").hide();
		});
	}
	function status()//是否具有预约资格
	{

		$("#subject").change(function(){
			//var value = $("#subject").val();
			var value = $("#subject option:selected").val();
			if(value!=0)
			{
				$.ajax({
					url:"/driving/Subject/status",
					type:"get",
					data:{"subject":$("#subject option:selected").val()},
					dataType:"json",
					async:false,
					success:function(data)
					{
						if(data.res==1){
						    layer.msg('您具有预约资格',{icon:1,time:2000});
							//window.location.href="${prePage}";
							$("#next").show();
							//alert($("#subject option:selected").val());
						}
						if(data.res==0){
						
							layer.msg('当前还不能预约该科目',{icon:0,time:2000});
							$("#next").hide();
						}
					},
					error:function(){
						alert('error');
					}
				
				});
			}
		});
		
		
	}
	function totalSession(){//第二页面的所有操作
		$("#next").hide();
		place();
		readplace();
	}
	
	function place()//考试地点选择
	{
		
	   
		$.ajax({
				url:"/driving/Subject/place",
				type:"get",
				data:{},
				dataType:"json",
				async:false,
				success:function(data)
				{
					$("#address1").html('');
					$("#address1").append('<option value="0">请选择科目</option>');
					$.each(data,function(index,place){
						$("#address1").append(
							'<option value='+(index+1)+'>'+place.site+'</option>'		
							
						);	
					});
				},
				error:function(){
					alert('error');
				}
		
		});
	}
	
	function  readplace(){//获取场地的具体值
		
		$("#address1").change(function(){
			
			var value = $("addresss1 option:selected").val();
			if(value!=0)
			{
				$.ajax({
					url:"/driving/Subject/read",
					type:"get",
					data:{"address1":$("#address1 option:selected").text()},
					dataType:"json",
					async:false,
					success:function(data)
					{
						   $("#next").show();
							//alert($("#subject option:selected").val());
						
		
					},
					error:function(){
						alert('error');
					}
				
			});
			}
		});
	}
	
	function subjectInfo()//获取所选科目和场地
	{
		var value = $("#subject option:selected").val(); 
		alert(value);
		$("#finish").click(function(){
			alert(value);
		});
	}
	
	function select()//下拉框判断是否为空
	{
		$("#next").click(function(){
			if ($("#subject option:selected").val()==0){
				//alert("请选择科目");
				layer.msg('请选择科目',{icon:0,time:2000});
			}
			else {
				window.location.href="${pageContext.request.contextPath}/page/subject2.jsp";
			}
		});
		
		
		
		
	}
	
	
     function order()//预约须知
     {

			layer.open({
				  type: 2,
				  title: '预约须知',
				  closeBtn: 0, //不显示关闭按钮
				  shade: [0],
				  area: ['600px', '500px'],
				  offset: 'c', //右下角弹出
				 
				  anim: 2,
				  content: ['${pageContext.request.contextPath}/page/agreement.jsp','yes'], //iframe的url，no代表不显示滚动条
				
				});
     }
	</script>

</html>
